<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			* {
			    margin: 0;
			    padding: 0;
			    list-style: none;
			    font-family: '微软雅黑'
			}
			.user-info{
				width:100%;
				height:571px;
				background
			}
			.user-info li{
				width:100%;
				height:60px;
				border:1px solid rgb(216,216,216);
				border-top:none;
			}
			.user-info li:frist-child{
				border:1px solid rgb(216,216,216);
			}
			.icon{
				margin-top:10px;
				float:left;
				font-size:20px;
				width: 40px;
				height: 40px;
			}
			.icon img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.left{
				float:left;
				margin-left:10px;
			}
			.username{
				margin-top:10px;
				margin-bottom:5px;
			}
			.username span{
				font-size: 18px;
			}
			.message span{
				color: rgb(136,136,136);
				font-size: 12px;
			}
			.contact_info{
				/* height: 600px; */
				background-color: ;
			}
			.contact_info li{
				height: 60px;
				line-height: 60px;
			}
			.contact_info li span{
				margin-left: 20px;
			}
			.users{
				margin-top: 20px;
			}
			.users li{
				width: 100%;
				height: 40px;
				margin-top: 5px;
				position: relative;
				float: left;
			}
			.users img{
				float: left;
				width: 40px;
				height: 40px;
				margin-left: 20px;
				border-radius: 50%;
			}
			.users span{
				float: left;
				right: 50px;
				font-size: 20px;
				margin-left: 30px;
				margin-top: 10px;
			}
			.find_info li{
				border-bottom: rgb(222,222,222) solid 1px;
				height: 40px;
				line-height: 40px;
			}
			.find_info li span:nth-child(1){
				margin-top: 8px;
				float: left;
				margin-left: 40px;
			}
			.find_info li span:nth-child(2){
				float: left;
				margin-left: 30px;
			}
			.find_info li span:nth-child(3){
				margin-top: 8px;
				float: right;
				margin-right: 10px;
			}
			.top-info{
				position: absolute;
				width: 100%;
				clear: both;
				height: 100px;
				border-bottom:1px solid #929292;
			}
			.top-info-icon{
				float: left;
				margin: 25px 25px 0 25px;
			}
			.top-info-icon img{
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
			.top-info-userinfo{
				float: left;
				margin-top: 25px;
			}
			.me-nickname{
				display: block;
			}
			.top-info-userinfo-account{
				font-size: 12px;
			}
			.biaoqing{margin-top:150px;}
			.find-shezhi{
				margin-top: 340px;
				border-top: 1px rgb(222,222,222) solid ;
			}
			.mui-content{
				height: 100%;
			}
			.mui-scroll{
				padding-bottom: 55px;
			}
			.delete-compelete{
				display: none;
			}
			.delete-img{
				float: right;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title">My-chat</h1>
			<button id='setting' class=" mui-pull-right mui-btn-link">设置</button>
		</header>
			<div class="mui-content mui-scroll-wrapper" >
				<div class="mui-scroll" id="content_info">
					<!--这里放置真实显示的DOM内容-->
					
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<!--style=" touch-action: none;" chrome 监听touch类事件报错：无法被动侦听事件preventDefault，是新版本chrome 浏览器报错。 -->
			<a class="mui-tab-item mui-active" id="liaotian" style=" touch-action: none;">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">聊天</span>
			</a>
			<a class="mui-tab-item" id="contact" style=" touch-action: none;">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" id="find" style=" touch-action: none;">
				<span class="mui-icon mui-icon-starhalf"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item " id="me" style=" touch-action: none;">
				<span class="mui-icon mui-icon-person" ></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			
		</script>
		<script>
			mui.init(one());
				function one(){
					var content_info = document.getElementById('content_info');
					content_info.innerHTML = '<ul class="user-info" id="onlineuser_info" >'+
						'</ul>';
					var url = "../onlinechat/interface/getOnlineUsers.php";
					mui.ajax(url,{
						data:"sign_str="+localStorage.getItem('my_sign_str')+"&user_id="+localStorage.getItem('my_user_id'),
						dataType:'json',
						type:'post',
						success:function(data){
							var users = data.data;
							var list = document.getElementById('onlineuser_info');
							var li;
							mui.each(users,function(index,item){
								var nickname = item['nickname'];
								var head_logo = item['head_logo'];
								var online_number = item['onlinechat_number'];
								var receive_user_id = item['user_id'];
								var my_user_id = localStorage.getItem('my_user_id');
								var url = "./private_chat.html?receive=" + receive_user_id + "&nickname=" +nickname;
								if(receive_user_id!=my_user_id){
									li = document.createElement('li');
									li.innerHTML ='<li  onclick="javascript:window.location.href=' +
									"'" + url + "'" +
									'">' +
									'<div class="icon"><img src=".'+head_logo+'" ></div>'+
									'<div class="left">'+
									'<div class="username" id = "onlineuser_info_nickname"><span>'+nickname+'</span></div>'+
									'<div class="message"><span>'+online_number+'</span></div>'+
									'</div>'+'</li>';
									list.appendChild(li);
								}
							})
						}
					});
					
				}
				//初始化加载msroll，将mui-content和mui-scrool放一起就会由滚动效果，但是时点击滚动，不是轮滑
			(function($) {
				$(".mui-scroll-wrapper").scroll({
					deceleration: 0.002 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
			})(mui);
			//dom操作
			var content_info = document.getElementById('content_info');
			document.getElementById('liaotian').onclick=()=>{
				one();
			}
			document.getElementById('contact').onclick=()=>{
				content_info.innerHTML = '<ul class="contact_info">'+
					'<li id="adduser"><span class="mui-icon mui-icon-personadd"></span>'+
					'<span id="">新朋友</span>'+
					'</li>'+
					'<li id="qunliao"><span class="mui-icon mui-icon-personadd"></span>'+
					'<span id="">群聊</span>'+
					'</li></ul>'+
				'<ul class="users" id="user-info">'+
				'</ul>';
				var url = "../onlinechat/interface/getFriends.php";
				mui.ajax(url,{
					data:{
						sign_str:localStorage.getItem('my_sign_str'),
						user_id:localStorage.getItem('my_user_id')
					},
					dataType:'json',
					type:'get',
					success:function(data){
						// if(data.code==0){
						// 	console.log(data.data[0]['nickname']+data.data[1]['head_logo'])
						// }
						var friend = data.data;
						console.log(friend)
						var list = document.getElementById('user-info');
						var li;
						for(let i =0 ;i<friend.length;i++){
							var nickname = friend[i]['nickname'];
							var head_logo = friend[i]['head_logo'];
							var receive_user_id = friend[i]['user_id'];
							// console.log(nickname+head_logo+receive_user_id)
							var url = "./private_chat.html?receive=" + receive_user_id + "&nickname=" + nickname;
							list.innerHTML += '<li  class="" id="ondelete'+i+'" onclick="javascript:window.location=' +
							"'" + url + "'" +'">'+
							'<img src=".'+head_logo+'"><span>'+
							nickname+'</span>'+
							'<div class="delete-img" onclick="deletefriend('+ receive_user_id+','+i +')"><img src="images/nofriend.png" /></div>'
							+'</li>'
						}
						// mui.each(friend,function(index,item){
						// 	var nickname = item['nickname'];
						// 	var head_logo = item['head_logo'];
						// 	var receive_user_id = item['user_id'];
						// 	// console.log('nickname='+nickname+' head-logo='+head_logo);
						// 	li = document.createElement('li');
						// 	var url = "./private_chat.html?receive=" + receive_user_id + "&nickname=" + nickname;
						// 	li.innerHTML = '<li  class="" id="ondelete'+index+'" onclick="javascript:window.location=' +
						// 	"'" + url + "'" +'">'+
						// 	'<img src=".'+head_logo+'"><span>'+
						// 	nickname+'</span>'+
						// 	'<div class="delete-img" onclick="deletefriend('+ receive_user_id+','+index +')"><img src="images/nofriend.png" /></div>'
						// 	+'</li>'
						// 	list.appendChild(li);
						// })
					}
				})
				
				var adduser = document.getElementById('adduser').onclick=()=>{
					window.location ="adduser.html";
				};
				var qunliao = document.getElementById('qunliao');
				qunliao.onclick=()=>{
					window.location = 'qunliao.html'
				}
			}
			function ss(){
				console.log("li")
			}
			function deletefriend(fuserid,index){
				let id = "ondelete"+index;
				let ondelete = document.getElementById(id);
				ondelete.removeAttribute('onclick');
				// console.log(1);
				let userid = localStorage.getItem('my_user_id');
				let sign = localStorage.getItem('my_sign_str');
				let url = "../onlinechat/interface/removeFriend.php"
				mui.ajax(url,{
					data:"sign_str="+sign+"&user_id="+userid+"&friend_id="+fuserid,
					dataType:'json',
					type:'post',
					success:function(data){
						mui.alert(data.msg);
						if(data.code==0){
							ondelete.className = "delete-compelete";
						}
					}
				})
			}
			document.getElementById('find').onclick=()=>{
				
			}
			document.getElementById('me').onclick=()=>{
				var me_data = JSON.parse(localStorage.getItem('my_data'));
				var me_header_logo = me_data['head_logo'];
				var me_nickname = localStorage.getItem('my_nickname');
				var me_onlinechat_number = localStorage.getItem('my_onlinechat_number');
				content_info.innerHTML = '<div class="top-info">'+
						'<div class="top-info-icon">'+
						'<img src=".'+me_header_logo+'" >'+
						'</div>'+
						'<div class="top-info-userinfo">'+
							'<span class="me-nickname">'+me_nickname+'</span>'+
							'<div class="top-info-userinfo-account">'+
								'<span style="font-size: 12px;color: rgb(157,137,157);">账号：</span>'+
								'<span style="font-size: 12px;color: rgb(157,137,157);">'+me_onlinechat_number+'</span>'+
							'</div>'+
						'</div>'+
						'<div class="biaoqing">'+
							'<ul class="find_info">'+
								'<li><span class="mui-icon mui-icon-spinner mui-spin"></span>'+
								'<span>表情</span>'+
								'<span class="mui-icon mui-icon-forward"></span></li>'+
								'<li><span class="mui-icon mui-icon mui-icon-pengyouquan"></span>'+
								'<span>朋友圈</span>'+
								'<span class="mui-icon mui-icon-forward"></span></li>'+
							'</ul></div>'+
						'<div class="find-shezhi">'+
							'<ul class="find_info">'+
								'<li id="my_setting"><span class="mui-icon mui-icon-gear"></span>'+
								'<span>设置</span>'+
								'<span class="mui-icon mui-icon-forward"></span></li>'+
							'</ul>'+
						'</div>'+
					'</div>';
					var my_setting = document.getElementById('my_setting')
					my_setting.onclick=()=>{
						window.location = 'setting.html'
					}
			}
			document.getElementById('setting').onclick=()=>{
				window.location="setting.html";
			}
			
		</script>
	</body>

</html>